<!DOCTYPE HTML>
<html>

<head>
    <link href="../css/web-icons-master/css/web-icons.css" rel="stylesheet" />
    <!--样式-->
    <link href="../css/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/core.css" rel="stylesheet" />
    <link href="../css/site.css" rel="stylesheet" />
</head>

<body>

    <div class="page">
        <div class="page-header">
            <h1 class="page-title">Home</h1>
        </div>
        <div class="page-content container-fluid">
            <div class="row">
                <div class="col-xl-6 col-lg-12">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="card card-block p-25">
                                <div class="counter counter-lg">
                                    <span class="counter-number">60</span>
                                    <div class="counter-label text-uppercase">订单数</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="card card-block p-25">
                                <div class="counter counter-lg">
                                    <div class="counter-number-group">
                                        <span class="counter-number-related">-</span>
                                        <span class="counter-number">120</span>
                                    </div>
                                    <div class="counter-label text-uppercase">访问量</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="card card-block p-25 bg-blue-600">
                                <div class="counter counter-lg counter-inverse">
                                    <div class="counter-label text-uppercase">浏览量</div>
                                    <span class="counter-number">220</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="card card-block p-25 bg-purple-600">
                                <div class="counter counter-lg counter-inverse">
                                    <div class="counter-label text-uppercase">增长量</div>
                                    <div class="counter-number-group">
                                        <span class="counter-number-related">-</span>
                                        <span class="counter-number">90</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 col-lg-12">
                    <div class="card-group">
                        <div class="card card-block p-0">
                            <div class="counter counter-md vertical-align bg-white h-300">
                                <div class="counter-icon p-30 green-600" style="position:absolute;top:0;left:0;">
                                    <i class="icon wb-stats-bars" aria-hidden="true"></i>
                                </div>
                                <div class="counter-number-group font-size-30 vertical-align-middle">
                                    <span class="counter-icon green-600 mr-10">
                                        <i class="wb-graph-up"></i>
                                    </span>
                                    <span class="counter-number">9</span>
                                    <span class="counter-number-related">%</span>
                                    <div class="font-size-20 mt-3">本月</div>
                                </div>
                            </div>
                        </div>
                        <div class="card card-block p-0">
                            <div class="vertical-align text-center bg-red-700 white p-30 h-300">
                                <div class="vertical-align-middle font-size-40">
                                    <p>月度</p>
                                    <p>销售额</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 col-lg-12">
                    <div class="card-group">
                        <div class="card card-block p-30">
                            <div class="counter counter-lg text-left pl-20">
                                <span class="counter-number">286</span>
                                <div class="counter-label text-uppercase">线上销售</div>
                            </div>
                        </div>
                        <div class="card card-block p-30">
                            <div class="counter counter-lg text-left pl-20">
                                <span class="counter-number">286</span>
                                <div class="counter-label text-uppercase">门店销售</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-6">
                    <div class="card card-block p-30">
                        <div class="counter counter-lg">
                            <div class="counter-label text-uppercase">增长</div>
                            <div class="counter-number-group">
                                <span class="counter-icon mr-10 green-600">
                                    <i class="wb-stats-bars"></i>
                                </span>
                                <span class="counter-number">2.8</span>
                                <span class="counter-number-related">%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-6">
                    <div class="card card-block p-30">
                        <div class="counter counter-lg">
                            <div class="counter-label text-uppercase">增长</div>
                            <div class="counter-number-group">
                                <span class="counter-number">4.5</span>
                                <span class="counter-number-related">%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 col-lg-12">
                    <div class="card-group">
                        <div class="card card-block p-0">
                            <div class="counter counter-lg counter-inverse bg-blue-600 vertical-align h-150">
                                <div class="vertical-align-middle">
                                    <div class="counter-icon mb-5">
                                        <i class="icon wb-image" aria-hidden="true"></i>
                                    </div>
                                    <span class="counter-number">1,286</span>
                                </div>
                            </div>
                        </div>
                        <div class="card card-block p-0">
                            <div class="counter counter-lg counter-inverse bg-red-600 vertical-align h-150">
                                <div class="vertical-align-middle">
                                    <div class="counter-icon mb-5">
                                        <i class="icon wb-video" aria-hidden="true"></i>
                                    </div>
                                    <span class="counter-number">620</span>
                                </div>
                            </div>
                        </div>
                        <div class="card card-block p-0">
                            <div class="counter counter-lg counter-inverse bg-purple-600 vertical-align h-150">
                                <div class="vertical-align-middle">
                                    <div class="counter-icon mb-5">
                                        <i class="icon wb-envelope" aria-hidden="true"></i>
                                    </div>
                                    <span class="counter-number">2,860</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-6">
                    <div class="card card-block">
                        <div class="counter counter-lg">
                            <div class="counter-label text-uppercase font-size-16">共发布</div>
                            <div class="counter-number-group">
                                <span class="counter-number">300</span>
                                <span class="counter-number-related">+</span>
                            </div>
                            <div class="counter-label text-uppercase font-size-16">微博</div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-6">
                    <div class="card card-block p-20 bg-blue-600">
                        <div class="counter counter-lg counter-inverse">
                            <div class="counter-label text-uppercase font-size-16">共上传</div>
                            <div class="counter-number-group">
                                <span class="counter-number">365</span>
                                <span class="counter-icon ml-10">
                                    <i class="icon wb-image" aria-hidden="true"></i>
                                </span>
                            </div>
                            <div class="counter-label text-uppercase font-size-16">图片</div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8 col-lg-12">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="card p-30 flex-row justify-content-between">
                                <div class="white">
                                    <i class="icon icon-circle icon-2x wb-clipboard bg-red-600" aria-hidden="true"></i>
                                </div>
                                <div class="counter counter-md counter text-right">
                                    <div class="counter-number-group">
                                        <span class="counter-number">25</span>
                                        <span class="counter-number-related text-capitalize">项目</span>
                                    </div>
                                    <div class="counter-label text-capitalize font-size-16">正在开发中</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="card p-30 flex-row justify-content-between">
                                <div class="counter counter-md text-left">
                                    <div class="counter-number-group">
                                        <span class="counter-number">42</span>
                                        <span class="counter-number-related text-capitalize">人</span>
                                    </div>
                                    <div class="counter-label text-capitalize font-size-16">已付款</div>
                                </div>
                                <div class="white">
                                    <i class="icon icon-circle icon-2x wb-users bg-blue-600" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="card card-block p-30">
                                <div class="counter counter-md text-left">
                                    <div class="counter-label text-uppercase mb-5">新访客</div>
                                    <div class="counter-number-group mb-10">
                                        <span class="counter-number">12,657</span>
                                    </div>
                                    <div class="counter-label">
                                        <div class="progress progress-xs mb-10">
                                            <div class="progress-bar progress-bar-info bg-blue-600" aria-valuenow="70.3"
                                                aria-valuemin="0" aria-valuemax="100" style="width: 70.3%"
                                                role="progressbar">
                                                <span class="sr-only">70.3%</span>
                                            </div>
                                        </div>
                                        <div class="counter counter-sm text-left">
                                            <div class="counter-number-group">
                                                <span class="counter-icon blue-600 mr-5">
                                                    <i class="wb-graph-up"></i>
                                                </span>
                                                <span class="counter-number">38%</span>
                                                <span class="counter-number-related">同比增长</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="card card-block p-30">
                                <div class="counter counter-md text-left">
                                    <div class="counter-label text-uppercase mb-5">新订单</div>
                                    <div class="counter-number-group mb-10">
                                        <span class="counter-number">2,381</span>
                                    </div>
                                    <div class="counter-label">
                                        <div class="progress progress-xs mb-5">
                                            <div class="progress-bar progress-bar-info bg-red-600" aria-valuenow="20.3"
                                                aria-valuemin="0" aria-valuemax="100" style="width: 20.3%"
                                                role="progressbar">
                                                <span class="sr-only">20.3%</span>
                                            </div>
                                        </div>
                                        <div class="counter counter-sm text-left">
                                            <div class="counter-number-group">
                                                <span class="counter-icon red-600 mr-5">
                                                    <i class="wb-graph-down"></i>
                                                </span>
                                                <span class="counter-number">14%</span>
                                                <span class="counter-number-related">同比增长</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-md-6">
                    <div class="card card-block p-30 bg-green-600 h-350">
                        <div class="counter counter-lg counter-inverse">
                            <div class="counter-label">
                                <div class="font-size-30">2018</div>
                                <div class="font-size-14">总收入</div>
                            </div>
                            <div class="counter-number-group text-center"
                                style="width:100%;position:absolute;bottom:30px;left:0;">

                                <span class="counter-number-related font-size-30">¥</span>
                                <span class="counter-number">356 万</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-md-6">
                    <div class="card card-block p-30 bg-orange-600 text-center vertical-align h-350">
                        <div class="counter counter-lg counter-inverse vertical-align-middle">
                            <span class="counter-number">7.3</span>
                            <div class="counter-label text-capitalize">客户满意度</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card card-block p-30 bg-blue-600">
                        <div class="card-watermark darker font-size-80 m-15">
                            <i class="icon wb-clipboard" aria-hidden="true"></i>
                        </div>
                        <div class="counter counter-md counter-inverse text-left">
                            <div class="counter-number-group">
                                <span class="counter-number">25</span>
                                <span class="counter-number-related text-capitalize">个项目</span>
                            </div>
                            <div class="counter-label text-capitalize">待开发</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card card-block p-30 bg-red-600">
                        <div class="card-watermark darker font-size-80 m-15">
                            <i class="icon wb-users" aria-hidden="true"></i>
                        </div>
                        <div class="counter counter-md counter-inverse text-left">
                            <div class="counter-number-group">
                                <span class="counter-number">42</span>
                                <span class="counter-number-related text-capitalize">人</span>
                            </div>
                            <div class="counter-label text-capitalize">预约购买</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card card-block p-30 bg-green-600">
                        <div class="card-watermark darker font-size-60 m-15">
                            <i class="icon wb-musical" aria-hidden="true"></i>
                        </div>
                        <div class="counter counter-md counter-inverse text-left">
                            <div class="counter-number-group">
                                <span class="counter-number">661</span>
                                <span class="counter-number-related text-capitalize">音乐</span>
                            </div>
                            <div class="counter-label text-capitalize">已下载</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card card-block p-30 bg-purple-600">
                        <div class="card-watermark lighter font-size-60 m-15">
                            <i class="icon wb-image" aria-hidden="true"></i>
                        </div>
                        <div class="counter counter-md counter-inverse text-left">
                            <div class="counter-number-wrap font-size-30">
                                <span class="counter-number">1025</span>
                                <span class="counter-number-related text-capitalize">图片</span>
                            </div>
                            <div class="counter-label text-capitalize">已上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--脚本-->
    <script src="../../libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>

</html>